<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .done {
            color: #999;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>Todo List</h1>
        <input type="text" v-model="thing" @keyup.enter="add">
        <button @click="add">添加</button>
        <p>待办事项</p>
        <ul>
            <li v-for="(item, index) in todoList">
                <span>{{item}}</span>
                <button @click="del(index)">del</button>
            </li>
        </ul>
        <p>完成事项</p>
        <ul>
            <li class="done" v-for="(item, index) in doneList">
                <span>{{item}}</span>
            </li>
        </ul>
    </div>
    <script src="../vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                // 要添加的事件
                thing: '',
                // 要完成的事件列表——保证是数组类型
                todoList: [],
                // 已完成的事件列表
                doneList: []
            },
            created() {
                this.todoList = JSON.parse(localStorage.getItem('todoList')) || [];
                this.doneList = JSON.parse(localStorage.getItem('doneList')) || [];
            },
            methods: {
                // 新增待办事项
                add() {
                    // 不能为空
                    if(this.thing) {
                        this.todoList.push(this.thing);
                        // 置空 方便下次输入
                        this.thing = '';
                        // 本地存储
                        localStorage.setItem('todoList', JSON.stringify(this.todoList))
                    }
                },
                // 删除待办事项
                del(index) {
                    // 加入已完成列表
                    this.doneList.push(this.todoList[index]);
                    // 然后再删除 避免数据错乱
                    this.todoList.splice(index, 1);
                    // 本地存储
                    localStorage.setItem('todoList', JSON.stringify(this.todoList));
                    localStorage.setItem('doneList', JSON.stringify(this.doneList));
                }
            }
        })
    </script>
</body>
</html>